<template>
  <div class="app-container">
    <!-- 商户的首页 -->
    <div class="index_page" v-if="shopInfo&&checkPermi(['shd:home:statistics'])">
      <div class="banner_box flex">
        <div class="linqi_box">
          <div class="shop-name flex">
            <span>{{shopInfo.tenantName}}</span>
            <div style="margin-left:10px">
              <el-button @click="lianxiwomenfn" type="primary" style="padding:0 10px !important;font-size:14px;height:24px;border-radius:3px;">更换域名</el-button>
              <el-button @click="myHaibao" type="primary" style="padding:0 10px !important;font-size:14px;height:24px;border-radius:3px;">我的海报</el-button>
            </div>
          </div>
          <div class="domainhost flex">
            <div style="width:100px;flex-shrink:0">自营商城：</div>
            <div class="flex" style="align-items:center;width:100%">
              <a style="width:calc(100% - 150px);overflow:hidden;text-overflow:ellipsis" :href="'http://'+(shopInfo.domain&&shopInfo.domain.includes(',')?shopInfo.domain.split(',')[0]:shopInfo.domain)" target="_blank">{{shopInfo.domain}}</a>
              <el-button @click="copy(shopInfo.domain)" type="primary" style="padding:0 10px !important;font-size:14px;height:24px;border-radius:3px;">复制</el-button>
            </div>
          </div>
          <div class="tit40">
            <span>您有{{daoqiFuwu.length}}个</span>
            <span>服务即将到期:</span>
          </div>
          <div v-if="daoqiFuwu&&daoqiFuwu.length">
            <div class="item" v-for="item in daoqiFuwu.slice(0,2)" :key="item.id">
              <span style="margin-right: 15px;">{{item.businessName}}</span>
              <span class="flex">
                <el-statistic ref="statistic" format="DD 天 HH:mm:ss" :value="new Date(item.closeTime + ' 23:59:59')" title="" time-indices prefix="剩余">
                </el-statistic>
              </span>
            </div>
          </div>
          <div v-else class="item">暂无即将到期服务</div>

          <div class="btn">
            <el-button style="color:#6C5DD3;background-color:#fff;border:none" size="small" type="primary" @click="goJifenshangchneg">立即续费</el-button>
          </div>
        </div>
        <div class="lunbo_box">
          <div class="flex top">
            <img src="../assets/img/youzhi.png" alt="" style="width:110px">
            <div class="youshi">
              无货赔付·极速售后·价格优势·保证金商家
            </div>
            <div class="moreSJ" @click="goLink('/youzhishangjia')">
              更多商家》

            </div>

          </div>

          <div class="flex youzhi_box" v-if="paihangList&&Object.keys(paihangList).length">

            <div v-for="(item,j) in Object.keys(paihangList).slice(0,10)" :key="j" class="item" :style="{backgroundColor:bgColors[j]}">
              <div class="touxiang">
                <img :src="paihangList[item].avatar" alt="">
              </div>
              <div class="name">{{paihangList[item].tenantName}}</div>
            </div>
          </div>
          <div v-else style="font-size:26px;text-align:center;line-height:170px;color:#999">
            正在优化中...
          </div>
          <!-- <el-carousel indicator-position="none" height="264px">
            <el-carousel-item v-for="item in lunboList" :key="item.id">
              <img @click="goLink(item.pcJump)" :src="item.imgUrl" alt="" style="width:100%;height:100%;cursor: pointer;">
            </el-carousel-item>
          </el-carousel> -->
        </div>
      </div>
      <!-- 订单统计 -->
      <div class=" flex">
        <div class="jifen_box ">
          <!-- <img src="../assets/img/home/jifen.png" alt=""> -->
          <div class="jifen_rg">
            <div class="tit">剩余虞豆</div>
            <div class="jifen_num">
              <img style="width:24px;height:24px" src="../assets/img/home/jindou.png" alt="">
              <span v-if="shopInfo">{{shopInfo.campNumber}}</span>
              <span v-else>0</span>
              <!-- <el-button style="margin-left:10px; padding:0 10px !important;font-size:14px;height:24px;border-radius:3px;" type="primary" @click="yudoumingxi">虞豆明细</el-button> -->
            </div>
            <div class="btn" v-if="shopInfo">
              <el-button type="primary" @click="chongzhijifen">一键充值</el-button>
            </div>
          </div>
        </div>
        <!-- <div class="kucun_box">
          <img style="width:70px;height:70px" src="../assets/img/home/jindou2.png" alt="">
          <div class="tit flex">
            <img src="../assets/img/home/zhuyi.png" alt="">
            <span>滞销商品</span>
          </div>
          <div class="num">{{kucunNum}}</div>
        </div> -->
        <div class="card kucun_box">
          <div>
            <subtit title="待办"></subtit>
            <div class="cont_box flex">
              <div class="item">
                <div class="flex">
                  <img src="../assets/img/zhuanshouicon.png" alt="">
                  <div>转手未处理</div>
                </div>
                <div class="num">{{monitorTaskErrNum.zhuanshou||0}}</div>
              </div>
              <div class="item">
                <div class="flex">
                  <img src="../assets/img/diaobangicon.png" alt="">
                  <div>掉绑未处理</div>
                </div>
                <div class="num">{{monitorTaskErrNum.diaobang||0}}</div>
              </div>
              <div class="item">
                <div class="flex">
                  <img src="../assets/img/zhixiaoicon.png" alt="">
                  <div>滞销商品</div>
                </div>
                <div class="num">{{kucunNum||0}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="kucun_box">
          <div class="tit flex">
            <span>账号监控</span>
          </div>
          <div class="">掉绑待处理{{monitorTaskErrNum.diaobang}}</div>
          <div class="">转手待处理{{monitorTaskErrNum.zhuanshou}}</div>
        </div> -->
        <div class="card order_total_box">
          <div>
            <subtit title="订单统计"></subtit>
            <div class="cont_box flex">
              <div class="num_item flex jyz">
                <img src="../assets/img/home/jiaoyizhong.png" alt="">
                <div class="rg">
                  <div class="tit">交易中</div>
                  <div class="num">{{orderTotalNums.inPaySaleOrderNum}}</div>
                </div>
              </div>
              <div class="num_item flex jywc">
                <img src="../assets/img/home/wancheng.png" alt="">
                <div class="">
                  <div class="tit">交易完成</div>
                  <div class="num">{{orderTotalNums.sucessSaleOrderNum}}</div>
                </div>
              </div>
              <div class="num_item flex jysb">
                <img src="../assets/img/home/shibai.png" alt="">
                <div class="">
                  <div class="tit">交易失败</div>
                  <div class="num">{{orderTotalNums.cancelSaleOrderNum}}</div>
                </div>
              </div>
              <div class="num_item flex shtj">
                <img src="../assets/img/home/shouhou.png" alt="">
                <div class="">
                  <div class="tit">售后统计</div>
                  <div class="num">{{orderTotalNums.totalSaleOrderAfterNum}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单走势和销售人订单数据 -->
      <div class="order_byday_person flex">

        <div class="shangpin_total card">
          <subtit title="商品统计"></subtit>
          <div class="search_box flex">
            <!-- allGameList -->
            <el-select style="width:130px" filterable v-model="queryParams.gameId" placeholder="请选择游戏" clearable size="small">
              <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
            <el-button style="width:56px;height:32px;background-color:#6C5DD3;font-size:12px;color:#fff;padding:0;border-radius:3px;margin-left:8px" type="primary" icon="el-icon-search" @click="getgoodsStatebyGame">
              搜索</el-button>
          </div>
          <div class="goods_nums">
            <div class="total_num">
              <span>全部商品：<span style="color:#6C5DD3;font-size:24px">{{goodsNums.total}}</span></span>
              <span style="margin-left:10px">总成本：<span style="color:#6C5DD3;font-size:24px">¥{{goodsNums.totalCostPrice}}</span></span>
              <span style="margin-left:10px">总售价：<span style="color:#6C5DD3;font-size:24px">¥{{goodsNums.totalPrice}}</span></span>
            </div>
            <div class="type_box" v-if="goodsNums.total||goodsNums.total===0">
              <div class="item flex">
                <img src="../assets/img/home/zaishoushangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>在售商品:{{goodsNums.weishou}}</span>
                      <span>成本:¥{{goodsNums.weishouCostPrice}}</span>
                      <span>售价:¥{{goodsNums.weishouPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.weishou,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.weishou,goodsNums.total)" color="#6C5DD3"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../assets/img/home/yishoushangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>已售商品:{{goodsNums.yishou}}</span>
                      <span>成本:¥{{goodsNums.yishouCostPrice}}</span>
                      <span>售价:¥{{goodsNums.yishouPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.yishou,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.yishou,goodsNums.total)" color="#7FBA7A"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../assets/img/home/jiaoyizhongshangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>交易中:{{goodsNums.jiaoyizhong}}</span>
                      <span>成本:¥{{goodsNums.jiaoyizhongCostPrice}}</span>
                      <span>售价:¥{{goodsNums.jiaoyizhongPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.jiaoyizhong,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.jiaoyizhong,goodsNums.total)" color="#FFCE73"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../assets/img/home/xiajiashangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>下架商品:{{goodsNums.xiajia}}</span>
                      <span>成本:¥{{goodsNums.xiajiaCostPrice}}</span>
                      <span>售价:¥{{goodsNums.xiajiaPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.xiajia,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.xiajia,goodsNums.total)" color="#FFE100"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../assets/img/home/shenhezhong.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>待审核商品:{{goodsNums.daishenhe}}</span>
                      <span>成本:¥{{goodsNums.daishenheCostPrice}}</span>
                      <span>售价:¥{{goodsNums.daishenhePrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.daishenhe,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.daishenhe,goodsNums.total)" color="#FFE100"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../assets/img/home/wentishangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>问题商品:{{goodsNums.wenti}}</span>
                      <span>成本:¥{{goodsNums.wentiCostPrice}}</span>
                      <span>售价:¥{{goodsNums.wentiPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.wenti,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.wenti,goodsNums.total)" color="#FFA2C0"></el-progress>
                  </div>
                </div>
              </div>
              <div class="item flex">
                <img src="../assets/img/home/sunhaoshangpin.png" alt="">
                <div class="rg">
                  <div class="num_box flex">
                    <div class="num">
                      <span>损耗商品:{{goodsNums.zhaohui}}</span>
                      <span>成本:¥{{goodsNums.zhaohuiCostPrice}}</span>
                      <span>售价:¥{{goodsNums.zhaohuiPrice}}</span>
                    </div>
                    <div class="baifen">{{getBaifenbi(goodsNums.zhaohui,goodsNums.total)}}%</div>
                  </div>
                  <div class="pross">
                    <el-progress :stroke-width="8" :show-text="false" :percentage="getBaifenbi(goodsNums.zhaohui,goodsNums.total)" color="#A0D7E7"></el-progress>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="order_day card">

          <subtit title="游戏销售利润统计"></subtit>
          <orderAmountByGame></orderAmountByGame>
        </div>
      </div>
      <div class="order_game card">
        <subtit title="近30日订单完成走势"></subtit>
        <orderByDayBar></orderByDayBar>
      </div>
      <div class="zhuce_shangpin flex">
        <div class="zhuce_box card">
          <subtit title="近30日注册用户走势"></subtit>
          <zhuceByDay></zhuceByDay>
        </div>
        <div class="person_order card">
          <subtit title="销售人数据统计"></subtit>
          <orderByPerson></orderByPerson>
        </div>

      </div>
      <chongzhi ref="chongzhi"></chongzhi>
      <Lianxiwomen ref="Lianxiwomen"></Lianxiwomen>
    </div>
    <!-- 管理员的首页 -->
    <div v-else-if="checkPermi(['searchTenantID'])" style="font-size:24px">
      <h2>破晓余额： <span style="font-weight:bold;color: blue;">{{poxiaoyue}}</span></h2>
      <!-- <el-button type="primary" @click="testAES">测试加密</el-button> -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>商家商品统计</span>
            </div>
            <div class="table_box">
              <el-table border stripe :data="supplerGoodsTotal" height="500">
                <el-table-column prop="tenant_name" label="商家名称">
                </el-table-column>
                <el-table-column prop="cot" label="商品数量">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>商家昨日上新统计</span>
            </div>
            <div class="table_box">
              <!-- <div style="margin:10px 0">
                <el-date-picker style="width:215px" size="small" v-model="timer" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="timerChange">
                </el-date-picker>
              </div> -->
              <el-table border stripe :data="supplerGoodsYesterday" height="500">
                <el-table-column prop="tenant_name" label="商家名称">
                </el-table-column>
                <el-table-column prop="cot" label="昨日上新">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-row style="margin-top:15px" :gutter="20">
        <el-col :span="12">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>商家虞豆统计</span>
            </div>
            <div class="table_box">
              <el-table @sort-change="yudouSortChange" border stripe :data="yudouList" height="500">
                <el-table-column prop="tenantName" label="商家名称">
                </el-table-column>
                <el-table-column sort-by sortable="custom" prop="tenantcampNumber" label="当前虞豆"></el-table-column>

                <el-table-column sort-by sortable="custom" prop="sumXHCampNumber" label="总消耗虞豆"></el-table-column>
                <el-table-column sort-by sortable="custom" prop="sumCZCampNumber" label="总充值虞豆"></el-table-column>

              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>商家注册用户统计</span>
            </div>
            <div class="table_box">
              <el-table border stripe :data="supplerUserTotal" height="500">
                <el-table-column prop="tenant_name" label="商家名称">
                </el-table-column>
                <el-table-column prop="cot" label="注册用户">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-row style="margin-top:15px" :gutter="20">
        <el-col :span="12">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>消费虞豆类型统计</span>
            </div>
            <div class="table_box">
              <el-table @sort-change="yudouTypeTableChange" border stripe :data="moduleYudouList" height="500">
                <el-table-column prop="tenantName" label="虞豆类型">
                  <template slot-scope="scope">
                    <el-tag :type="commonMaps.jifenTypeMap[scope.row.msg_type].type">{{ commonMaps.jifenTypeMap[scope.row.msg_type].label }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column sort-by sortable="custom" prop="cot" label="变动次数"></el-table-column>
                <el-table-column sort-by sortable="custom" prop="sum" label="虞豆数量"></el-table-column>
                <!-- <el-table-column sort-by sortable="custom" prop="sumCZCampNumber" label="总充值虞豆"></el-table-column> -->
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!-- <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>商家注册用户统计</span>
            </div>
            <div class="table_box">
              <el-table border stripe :data="supplerUserTotal" height="500">
                <el-table-column prop="tenant_name" label="商家名称">
                </el-table-column>
                <el-table-column prop="cot" label="注册用户">
                </el-table-column>
              </el-table>
            </div>
          </el-card> -->
        </el-col>

      </el-row>
    </div>
    <div v-else style="color:#666;font-size:30px;text-align:center;line-height:300px">
      欢迎使用 虞都互联~
    </div>

    <haibaoDialog ref="haibaoDialog"></haibaoDialog>
    <!-- 联系对方 -->
    <kefuList ref="kefuList"></kefuList>
  </div>
</template>
<script>
import subtit from "@/components/indexComponents/subtit.vue";
import orderByDayBar from "@/components/indexComponents/orderByDayBar.vue";
import orderByPerson from "@/components/indexComponents/orderByPerson.vue";
import orderAmountByGame from "@/components/indexComponents/orderAmountByGame.vue";
import zhuceByDay from "@/components/indexComponents/zhuceByDay.vue";

import chongzhi from "./tenantPages/moneys/components/chongzhijifen.vue";
import valueAddedServices from "@/api/shanghuduan/valueAddedServices";
import {
  saleOrderNum,
  goodsStatebyGame,
  goodsCountByTenant,
  yudouCountByTenant,
  getKucunNum,
  monitorTaskErr,
  getSupplerUserTotal,
  getPaihang,
  getModuleYudou
} from "@/api/tenantApis/indexStatistics.js";

import resourcesManage from "@/api/PCWebImages/resourcesManage";
import Lianxiwomen from "@/components/ConsignmentFourzero/lianxiwomen.vue";
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
import { formatDate } from "@/utils/index";
import haibaoDialog from "@/views/tenantPages/shopManage/shopCenter/haibaoDialog.vue";
import kefuList from "@/components/common/kefuList.vue";
export default {
  components: {
    subtit,
    orderByDayBar,
    orderByPerson,
    orderAmountByGame,
    zhuceByDay,
    chongzhi,
    Lianxiwomen,
    haibaoDialog,
    kefuList,
  },
  data() {
    return {
      bgColors: [
        "#CFC8FF",
        "#FFE3F2",
        "#FFE2AC",
        "#B7EFFF",
        "#FFCEBF",
        "#CFC8FF",
        "#FFE3F2",
        "#FFE2AC",
        "#B7EFFF",
        "#FFCEBF",
      ],
      poxiaoyue: "",
      orderTotalNums: {},
      goodsNums: {},
      queryParams: {
        gameId: "",
      },
      daoqiFuwu: [],
      serviceList: [],
      lunboList: [],
      // 以下是管理端数据
      supplerGoodsTotal: [],
      supplerUserTotal: [],
      supplerGoodsYesterday: [],
      timer: [],

      yudouList: [],
      yudouParams: {
        sortColumn: "",
        sort: "",
      },
      kucunNum: "",
      monitorTaskErrNum: {},
      moduleYudouList:[],
      yudouTypeParams: {
        sortColumn: "",
        sort: "",
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    allGameList() {
      return this.$store.getters.allGameList;
    },
    getBaifenbi() {
      return (num, total) => {
        const baifen = (num / (total || 1)) * 100;
        return Math.round(baifen);
      };
    },
    paihangList(){
      return this.$store.getters.allYouzhiMap;
    }
  },
  watch: {
    userInfo: {
      handler(val) {
        if (val.tenantId != 1) {
          // 这是商户
          // console.log("%c Line:346 🍅 这是商户", "color:#3f7cff");
          this.getOrderNums();
          this.getgoodsStatebyGame();
          this.getMyService();
          this.getLunbo();
          this.getKucunNumFn();
          this.getmonitorTaskErrFn();
        } else {
          // 这是管理员
          this.getpoxiao();
          // 计算昨日日期
          // let now = new Date();
          // let end = formatDate(now);
          // let start = formatDate(now.getTime() - 1 * 24 * 3600 * 1000);
          // start = start.slice(0, 10);
          // end = end.slice(0, 10);
          // this.timer = [start, end];
          this.initByAdmin();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    if (this.shopInfo && this.shopInfo.tenantId) {
      this.$store.dispatch("getShopInfo", this.shopInfo.tenantId);
    }
  },
  methods: {
    // 打开客服弹窗
    openIm(id) {
      this.$refs.kefuList.open(id, 1);
    },
    // 打开我的海报
    myHaibao() {
      this.$refs.haibaoDialog.open();
    },
 
    // 管理端的方法
    // 管理端统计初始化
    initByAdmin() {
      this.getGoodsTableDataTotal();
      this.getGoodsTableDataTimer();
      this.getYudouList();
      this.getSupplerUserTotal();
      this.getModuleYudouList()
    },
    // 获取模块虞豆消费统计 
    getModuleYudouList() {
      getModuleYudou(this.yudouTypeParams).then((res) => {
        this.moduleYudouList = res.data;
      });
    },
    // 虞豆类型统计排序
    yudouTypeTableChange(val) {
      this.yudouTypeParams.sort = val.order == "ascending" ? "asc" : "desc";
      this.yudouTypeParams.sortColumn = val.prop;
      this.getModuleYudouList();
    },
    // 账号统计日期改变
    timerChange(e) {},

    // 商品统计表格 总商品
    getGoodsTableDataTotal() {
      goodsCountByTenant().then((res) => {
        this.supplerGoodsTotal = res.data;
      });
    },
    // 获取商家注册用户统计
    getSupplerUserTotal() {
      getSupplerUserTotal().then((res) => {
        this.supplerUserTotal = res.data;
      });
    },
    // 获取账号统计表格 时间段
    getGoodsTableDataTimer() {
      // day:1昨天
      goodsCountByTenant({ day: 1 }).then((res) => {
        this.supplerGoodsYesterday = res.data;
      });
    },
    // 获取商家虞豆统计
    getYudouList() {
      // sortColumn  sort
      yudouCountByTenant(this.yudouParams).then((res) => {
        this.yudouList = res.data;
      });
    },
    // 虞豆统计排序
    yudouSortChange(val) {
      this.yudouParams.sort = val.order == "ascending" ? "asc" : "desc";
      this.yudouParams.sortColumn = val.prop;
      this.getYudouList();
    },
    // 获取破晓余额
    getpoxiao() {
      checkPhoneApi.pxyue().then((res) => {
        this.poxiaoyue = res.data.data;
      });
    },
    // 以下是商户端的方法
    // 联系我们
    lianxiwomenfn() {
      this.$refs.Lianxiwomen.open();
    },
    // 复制
    copy(txt) {
      this.$copyText(txt).then(() => {
        this.$message.success("已复制到剪切板");
      });
    },
    // 获取轮播图资源
    getLunbo() {
      let obj = {
        systemType: 1,
      };
      resourcesManage.getList(obj).then((response) => {
        // console.log("%c Line:111 🥑 response", "color:#42b983", response);
        this.$nextTick(() => {
          // this.loading = false;
          this.lunboList = JSON.parse(JSON.stringify(response.rows));
          // this.tableData.total = response.total;
        });
      });
    },
    // 跳转链接
    goLink(val) {
      if(val=='/youzhishangjia'){
        return this.$message('正在优化中，请耐心等待...')
      }
      if (val.indexOf("http") > -1) {
        window.open(val, "_blank");
      } else {
        this.$router.push({
          path: val,
        });
      }
    },
    // 立即续费
    goJifenshangchneg() {
      this.$router.push({
        path: "/jifenshangcheng",
      });
    },
    // 获取自己开通的增值服务
    getMyService() {
      // if()
      valueAddedServices
        .myValueAddedServiceList({ dataType: "one" })
        .then((res) => {
          this.daoqiFuwu = [];
          if (res.rows && res.rows.length) {
            this.serviceList = res.rows;
            this.serviceList.forEach((r) => {
              if (this.getDayNum(r.closeTime) <= 5) {
                this.daoqiFuwu.push(r);
              }
            });
          } else {
            this.serviceList = [];
          }
        });
    },
    // 获取日期与当前日期相差天数
    getDayNum(val) {
      let date = Date.parse(new Date(val)) / 1000;
      var today = Date.parse(new Date()) / 1000; //当前时间戳
      var nTime = date - today;
      var day = Math.floor(nTime / 86400) + 1;
      return day;
    },
    // 获取掉绑待处理
    getmonitorTaskErrFn() {
      monitorTaskErr().then((res) => {
        this.monitorTaskErrNum = res.data;
      });
    },
    // 获取滞销商品数量
    getKucunNumFn() {
      getKucunNum().then((res) => {
        this.kucunNum = res.data.unsoldCount;
      });
    },

    getOrderNums() {
      saleOrderNum().then((res) => {
        this.orderTotalNums = res.data;
      });
    },
    getgoodsStatebyGame() {
      goodsStatebyGame(this.queryParams).then((res) => {
        this.goodsNums = res.data;
      });
    },
    // 点击充值
    chongzhijifen() {
      this.$refs.chongzhi.open();
      // this.$refs.paySuccess.open();
    },
    // 虞豆明细
    yudoumingxi() {
      this.$router.push({
        path: "/shopManageByTenant/tenantPages/jifen",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  min-width: 1200px;
  background-color: #f6f6f6;
}
::v-deep .app-main {
  overflow-x: auto;
}
.index_page {
  padding-bottom: 20px;
}
::v-deep .el-statistic .con {
  color: #ffdb00 !important;
}

div {
  box-sizing: border-box;
}
.tit,
.tit40 {
  font-weight: 500;
  font-size: 32px;
  color: #ffffff;
}
.tit40 {
  font-size: 24px;
}
.banner_box {
  width: 100%;
  height: 296px;
  background-image: url("../assets/img/home/bannerbg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  overflow: hidden;
  justify-content: space-between;
  // align-items: center;
  padding: 18px;

  .linqi_box {
    padding-left: 30px;
    flex-shrink: 0;
    margin-right: 10px;
    min-width: 450px;
    overflow: hidden;
    .el-button {
      color: #6c5dd3;
      background-color: #fff;
      border: none;
      padding: 10px 35px;
      height: 46px;
      border-radius: 16px;
      font-size: 18px;
    }
    .shop-name {
     
      font-size: 32px;
      color: #fff;
      font-weight: bold;
      >span{
        width: 240px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .domainhost {
      justify-items: center;
      color: #fff;
      font-size: 20px;
      line-height: 40px;
      a {
        // background-color: $--color-success;
        // font-size: 20px;
        // padding: 0 15px;
        border-radius: 4px;
      }
      .el-button {
        margin-left: 10px;
      }
    }
    .item {
      display: flex;
      flex-wrap: nowrap;
      font-weight: 500;
      font-size: 16px;
      color: #ffdb00;
      line-height: 24px;
    }
    .btn {
      margin-top: 15px;
    }
  }
  .lunbo_box {
    min-width: 1000px;
    max-width: 1087px;
    height: 264px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    padding: 10px 15px;
    padding-right: 0;
    
    
    .top{
      position: relative;
      font-size: 16px;
      align-items: center;
      
      .youshi{
        color: #5E78FE;
        margin-left: 20px;
        font-weight: bold;
        padding-top: 15px;
      }
      .moreSJ{
        position: absolute;
        top: 15px;
        right: 26px;
        color: #6C5DD3;
        cursor: pointer;
        text-decoration-line: underline;

      }
    }
    
    .youzhi_box {
      flex-wrap: wrap;
      margin-top: 35px;
      height: 170px;
      .item {
        height: 54px;
        box-sizing: border-box;
        width: calc(20% - 7px);
        padding-left: 70px;
        // height: 74px;
        margin-right: 6px;
        margin-bottom: 32px;
        // text-align: center;
        // flex-wrap: nowrap;
        // overflow: hidden;
        border-radius: 27px;
        position: relative;
      }
      .touxiang {
        width: 56px;
        height: 56px;
        background: #ffffff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        top: -20px;
        left: 10px;
        img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin: 0 auto;
          margin-top: 4px;
        }
      }
      // .rg {
      //   width: calc(100% - 50px);
      //   margin-left: 5px;
      // }
      .name {
        color: #5f75ee;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 54px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
.card {
  padding: 18px;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}
.order_total_box {
  width: 100%;
  .cont_box {
    flex-wrap: nowrap;
    margin-top: 10px;
    .num_item {
      background: #ffa2c0;
      border-radius: 8px;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      height: 120px;
      width: 25%;
      color: #ffffff;
      &.jywc {
        background: #ffce73;
      }
      &.jysb {
        background: #a0d7e7;
      }
      &.shtj {
        background: #7fba7a;
      }
      img {
        width: 70px;
        height: 70px;
        margin-right: 15px;
      }
      .tit {
        font-weight: bold;
        font-size: 16px;

        height: 30px;
        line-height: 40px;
      }
      .num {
        font-weight: 500;
        font-size: 24px;
        line-height: 40px;
      }
    }
    @media screen and (max-width: 1650px) {
      .num_item {
        img {
          width: 45px;
          height: 45px;
          margin-right: 8px;
        }
        .tit {
          font-size: 14px;
        }
        .num {
          font-size: 22px;
        }
      }
    }
  }
}
.jifen_box {
  margin-top: 20px;
  width: 180px;
  border-radius: 10px;
  background: #fff;
  padding: 22px;
  margin-right: 16px;
  flex-shrink: 0;
  color: $primary;
  .jifen_rg {
    width: 100%;
    text-align: center;
    line-height: 50px;
    .tit {
      font-size: 28px;
      color: $primary;
      font-weight: 600;
    }
    .jifen_num {
      font-weight: 500;
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        // vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}
.kucun_box {
  width: 460px;
  border-radius: 10px;
  background: #fff;
  padding: 22px;
  padding-bottom: 10px;
  margin-right: 16px;
  margin-top: 20px;
  text-align: center;
  color: #333;
  flex-shrink: 0;
  .cont_box {
    justify-content: space-between;
    padding-top: 10px;
  }
  .item {
    width: 129px;
    height: 129px;
    background-image: url("../assets/img/daibanbg.png");
    background-size: 100% 100%;
    padding: 16px;

    > .flex {
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      div {
        margin-left: 5px;
        color: #000;
      }
    }
    img {
      width: 32px;
      height: 32px;
    }
  }
  .num {
    font-size: 26px;
    margin-top: 20px;
    color: $primary;
  }
}
.order_byday_person {
  .order_day {
    width: 100%;
  }
}
.zhuce_shangpin {
  .zhuce_box {
    width: 100%;
  }
  .person_order {
    width: 660px;
    flex-shrink: 0;
    margin-left: 16px;
  }
}
.shangpin_total {
  width: 560px;
  flex-shrink: 0;
  margin-right: 16px;
  position: relative;
  .search_box {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .total_num {
    font-size: 18px;
    text-align: center;
    padding-top: 20px;
  }
  .type_box {
    .item {
      margin-top: 12px;
      align-items: center;
      img {
        width: 36px;
        height: 36px;
        margin-right: 8px;
        flex-shrink: 0;
      }
      .rg {
        width: 100%;

        .num_box {
          justify-content: space-between;
          font-size: 16px;
          margin-bottom: 5px;
          font-weight: bold;
          .num {
            display: flex;
            > span {
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
}
</style>

